<template>
    <!--贷后催回数据-->
    <div id='afterLoanReturnView' name="afterLoanReturnView">
        <el-card class="box-card alr-header" shadow="hover">
            <div class="alr-item">
              <span class="fl">催收员:</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="alr-item">
              <span class="fl">查询时间:</span>
              <el-date-picker
                v-model="value6"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                @change="timechange"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="alr-btn">
                <el-button type="primary" @click="search">搜索</el-button>
            </div>
        </el-card>
        <el-card class="box-card alr-main" shadow="hover">
            <loading v-if="isTableData"></loading>
            <div v-else>
                <el-table
              :data="tableData"
              stripe
              show-summary
              :summary-method="getSummaries"
              style="width: 100%">
              <el-table-column
                prop="repayTakeTime"
                label="日期"
                align="center">
              </el-table-column>
              <el-table-column
                prop="repayOperatorName"
                label="催收员"
                align="center">
              </el-table-column>
              <el-table-column
                prop="repayCount"
                align="center"
                label="入催案件数">
              </el-table-column>
              <el-table-column
                prop="oldUser"
                align="center"
                label="老客数量">
              </el-table-column>
              <el-table-column
                prop="newUser"
                align="center"
                label="新客数量">
              </el-table-column>
              <el-table-column
                prop="d1"
                align="center"
                label="D1催回率">
              </el-table-column>
              <el-table-column
                prop="d3"
                align="center"
                label="D3催回率">
              </el-table-column>
              <el-table-column
                prop="d7"
                align="center"
                label="D7催回率">
              </el-table-column>
              <el-table-column
                prop="d10"
                align="center"
                label="D10催回率">
              </el-table-column>
              <el-table-column
                prop="d15"
                align="center"
                label="D15催回率">
              </el-table-column>
              <el-table-column
                prop="d20"
                align="center"
                label="D20催回率">
              </el-table-column>
              <el-table-column
                prop="d30"
                align="center"
                label="D30催回率">
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagat"
              v-show="tableData.length"
              @current-change="handleCurrentChange"
              :current-page="currentPage3"
              background
              :page-count="5"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
            </div>
      </el-card>
    </div>
</template>

<script>
import { Promise } from 'es6-promise'
import Storage from '../utils/storage'
import modal from '../components/Modal.vue'
import confirm from '../components/Confirm.vue'
import  { mapGetters, mapActions }  from 'vuex'
import loading from '../components/Loading.vue'
import { repayApi} from '../api/api'
export default{
    data(){
        return{
          options: [{
            id: null,
            name: '全部'
          }],
          value: '',
          value6:"",
          currentPage3:1,
          total:0,
          pageSize:10,
          tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          startTime:"",
          endTime:"",
          TimeStr:null,
          isTableData:false,
          totalObj:{},
          totalArr:[],
          mapArr:[],
          summaryArr:[],
        }
    },
    components:{
        modal,
        loading,
    },
    mounted(){
        
    },
    methods:{
        ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
        getSummaries(param) {
          return this.summaryArr;
      },
      timechange(val){
          if(val){
              this.startTime=val[0];
               this.endTime=val[1];
          }else{
              this.startTime="";
              this.endTime="";
          }
      },
      handleCurrentChange(val){
          console.log(`当前页: ${val}`);
          this.currentPage3=val
          this.init()
      },
      collectorsListFn(){
          repayApi.repayOperatorList()
          .then(result=>{
              this.options=result;
              this.options.unshift({
                      id:null,
                      name:"全部"
                    })
              console.log(this.options)
          })
          .catch(error => {
              console.error(error)

          })
      },
      init(){
        let msg={
            pageIndex:this.currentPage3,
            pageSize:this.pageSize,
            startTime:this.startTime,
            endTime:this.endTime,
            repayOperatorId:this.value
        }
        this.isTableData=true;
        repayApi.repayGetRepayOperatorDataList(msg)
        .then(result=>{
              this.tableData=result.page.list
              this.total=result.page.totalRow
              this.isTableData=false;
              this.totalObj=result.totalMap
              let arr=[];
              for(var item in this.totalObj){
                let obj={};
                  switch(item){
                      case "repayCount":
                      obj.value=this.totalObj[item];
                      obj.id=1;
                      arr.push(obj)
                      break;
                      case "oldUser":
                      obj.value=this.totalObj[item];
                      obj.id=2;
                      arr.push(obj)
                      break;
                      case "newUser":
                      obj.value=this.totalObj[item];
                      obj.id=3;
                      arr.push(obj)
                      break;
                      case "d1":
                      obj.value=this.totalObj[item];
                      obj.id=4;
                      arr.push(obj)
                      break;
                      case "d3":
                      obj.value=this.totalObj[item];
                      obj.id=5;
                      arr.push(obj)
                      break;
                      case "d7":
                      obj.value=this.totalObj[item];
                      obj.id=6;
                      arr.push(obj)
                      break;
                      case "d10":
                      obj.value=this.totalObj[item];
                      obj.id=7;
                      arr.push(obj)
                      break;
                      case "d15":
                      obj.value=this.totalObj[item];
                      obj.id=8;
                      arr.push(obj)
                      break;
                      case "d20":
                      obj.value=this.totalObj[item];
                      obj.id=9;
                      arr.push(obj)
                      break;
                      case "d30":
                      obj.value=this.totalObj[item];
                      obj.id=10;
                      arr.push(obj)
                      break;
                  }
              }
              this.mapArr=arr;
              let arr1=[],valueArr=[];
              for(var i=0;i<this.mapArr.length;i++){
                    arr1.push(this.mapArr[i].id)
                }
               let sortArr=arr1.sort(this.compare)
               for(var d = 0;d<sortArr.length;d++){
                    for(var h = 0;h<this.mapArr.length;h++){
                       if(this.mapArr[h].id==sortArr[d]){
                          valueArr.push(this.mapArr[h])
                       }
                    }
                }
                valueArr.unshift({
                  value:"--"
                })
                valueArr.unshift({
                  value:"汇总"
                })
                this.summaryArr=[]
                for(var s = 0;s<valueArr.length;s++){
                  if((typeof valueArr[s].value)=="string"){
                    this.summaryArr.push(Number(valueArr[s].value))
                  }else{
                      this.summaryArr.push(valueArr[s].value)
                  }
                }
                 for(var p = 0;p<this.summaryArr.length;p++){
                  if(p==0){
                    this.summaryArr[p]="汇总"
                  }
                  if(p==1){
                    this.summaryArr[p]="--"
                  }
                  if(p==5){
                    this.summaryArr[p]=result.totalMap.d1
                  }
                  if(p==6){
                    this.summaryArr[p]=result.totalMap.d3
                  }
                  if(p==7){
                    this.summaryArr[p]=result.totalMap.d7
                  }
                  if(p==8){
                    this.summaryArr[p]=result.totalMap.d10
                  }
                  if(p==9){
                    this.summaryArr[p]=result.totalMap.d15
                  }
                  if(p==10){
                    this.summaryArr[p]=result.totalMap.d20
                  }
                  if(p==11){
                    this.summaryArr[p]=result.totalMap.d30
                  }
                }
              this.TimeStr=new Date().getTime();
        })
        .catch(error => {
            console.error(error)
             this.isTableData=false;
        })
      },
      compare(value1, currentValue){
          return value1 - currentValue;
      },
      search(){
        if((new Date().getTime())-this.TimeStr>1000){
          this.currentPage3=1;
          this.init()
        }
      },
    },

    created(){
      this.collectorsListFn()
      this.init()
    },
}
</script>
<style lang="scss">
  #afterLoanReturnView .box-card{
    margin:20px 10px!important;
  }
  #afterLoanReturnView{
    padding: 0;
    font-weight: normal;
    .el-input__inner{
      height:44px;
    }
    .alr-main .el-card__body{
      padding:0;
    }
  }
  #afterLoanReturnView .el-button{
    padding: 0 20px;
    height: 44px;
  }
</style>
<style lang="scss" scoped>
 
  .alr-header{
    min-height:100px;
  }
  .alr-item{
    min-width:280px;
    height:44px;
    float: left;
  }
  .fl{
    float: left;
    height:100%;
    line-height: 44px;
    margin-right: 10px;
  }
  .alr-btn{
    float: left;
    height:44px;
    margin-left:20px;
  }
   .pagat{
    margin-top: 20px;
    margin-right:20px;
  }
</style>